<html>
    <head>
    	<link rel="stylesheet" type="text/css" href="style.css" />
    	<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			function collapseAll() {
				$('.folderOpen').removeClass('folderOpen').addClass('folderClose');
				$('.folder').children().slideUp('fast');
				$('#footer').text('');
			}

			function unCollapseAll() {
				$('.folderClose').removeClass('folderClose').addClass('folderOpen');
				$('.folder').children().slideDown('fast');
			}
			
			function createElement(node){
				var a = $('<a>');
				a.attr('href', node.url);
				a.text(node.title);
				
				var li = $('<li>');
				li.addClass('element');
				var src = 'http://www.google.com/s2/favicons?domain=' + node.url.split(/\/+/)[1];
				li.css({'list-style-image': 'url('+src+')'});
				li.append(a);
				li.click(function (event) {
					event.stopPropagation();
					if (event.button == 0) {
						// Left button
						if (event.ctrlKey) {
							// Left button + ctrl => New background tab
							chrome.tabs.create({url: node.url, selected: false});
						} else {
							// Left button => Update focus tab
							chrome.tabs.getSelected(null, function(tab) {
								chrome.tabs.update(tab.id, {url: node.url});
								window.close();
							});
						}
					} else if (event.button == 1) {
						// Middle button => New focused tab
						chrome.tabs.create({url: node.url});
					} else if (event.button == 2) {
						//FIXME: Middle button => New background tab
						chrome.tabs.create({url: node.url, selected: false});
					}					
				});
				li.hover(function() {
					$('#footer').text($(this).children().attr('href'));
				});
				return li;
			}

			function createFolder (node, closed){
				var ul = $('<ul>');
				for (var i=0; i<node.children.length; i++){
					ul.append(processNode(node.children[i], true));
				}
				if (node.children.length==0){
					closed = true;
				}

				var li = $('<li>');
				if (closed == true){
					ul.hide();
					li.addClass('folderClose');
				} else {
					li.addClass('folderOpen');
				}
				li.addClass('folder');
				li.text(node.title);
				li.append(ul);
				
				li.click(function(event) {
					event.stopPropagation();
					if ($(this).hasClass('folderOpen')){
						$(this).removeClass('folderOpen').addClass('folderClose');
					} else {
						$(this).removeClass('folderClose').addClass('folderOpen');
					}
					$(this).children().slideToggle('fast');
				});
				
				return li;
			}
					
			function processNode(node, closed) {
				if (node.children){
					return createFolder(node, closed);
				} else {
					return createElement(node);
				}
			}
			
			function getTreeCallBack(tree){
				var ul = $('<ul>');
				$('#bookmarks').append(ul);
				for (var i=0; i<tree[0].children.length; i++){
					ul.append(processNode(tree[0].children[i], false));
				}
			}
			
			chrome.bookmarks.getTree(getTreeCallBack);
		</script>
	</head>
	<body>
		<div id="buttons">
			<img src="images/button_minus_16x16.png" alt="-" onclick="collapseAll()"></img>
			<img src="images/button_plus_16x16.png" alt="-" onclick="unCollapseAll()"></img>
		</div>
		<div id="bookmarks"></div>
		<div id="footer"></div>
	</body>
</html>